<!--
 * @Author: your name
 * @Date: 2021-03-26 19:20:23
 * @LastEditTime: 2021-06-18 16:06:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/views/index.vue
-->
<template>
  <div class="main-page-container">
    <div class="main-banner">
      <div class="main-banner-search">
        <a-row class="banner-search">
          <a-col :span="4" style="height: 100%">
            <customSelect :tabName="'全部'" :selection="tabList" @handleSelect="handleMenuClick"></customSelect>
          </a-col>
          <a-col :span="20" style="height: 100%">
            <customInput class="banner-search-input" v-model="ruleForm.keywords" :placeholderStr="'请输入您想要搜索的内容'" @handleEnter="searchFun">
              <img slot="iconSuffix" :src="require('@/assets/image/search.png')" alt="" class="icon-search" @click.stop="searchFun">
            </customInput>
          </a-col>
        </a-row>
        <a-row class="total-count-container">
          <a-col :span="12">
            <a-row>
              <a-col :span="24">
                <span class="total-count__title">溶瘤病毒</span>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-checkbox-group @change="onColyticChange" style="width: 100%;">
                  <a-row v-for="(item, index) in parseInt(oncolyticVirusContent.length / 4) + 1" :key="index" style="margin-top: 13px;">
                    <a-col :span="7">
                      <a-checkbox :value="oncolyticVirusContent[index * 4].name" v-if="oncolyticVirusContent[index * 4]">
                        <span class="total-count__inner" @click.stop="navToSingle(oncolyticVirusContent[index * 4].name, 'virus_type')">{{oncolyticVirusContent[index * 4].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="5">
                      <a-checkbox :value="oncolyticVirusContent[index * 4 + 1].name" v-if="oncolyticVirusContent[index * 4 + 1]">
                        <span class="total-count__inner" @click.stop="navToSingle(oncolyticVirusContent[index * 4 + 1].name, 'virus_type')">{{oncolyticVirusContent[index * 4 + 1].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                      <a-checkbox :value="oncolyticVirusContent[index * 4 + 2].name" v-if="oncolyticVirusContent[index * 4 + 2]">
                        <span class="total-count__inner" @click.stop="navToSingle(oncolyticVirusContent[index * 4 + 2].name, 'virus_type')">{{oncolyticVirusContent[index * 4 + 2].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                      <a-checkbox :value="oncolyticVirusContent[index * 4 + 3].name" v-if="oncolyticVirusContent[index * 4 + 3]">
                        <span class="total-count__inner" @click.stop="navToSingle(oncolyticVirusContent[index * 4 + 3].name, 'virus_type')">{{oncolyticVirusContent[index * 4 + 3].name}}</span>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="12">
            <a-row>
              <a-col :span="24">
                <span class="total-count__title">肿瘤类型</span>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-checkbox-group @change="onTumorChange" style="width: 100%">
                  <a-row v-for="(item, index) in parseInt(tumorSpeciesContent.length / 4) + 1" :key="index" style="margin-top: 13px;">
                    <a-col :span="6">
                      <a-checkbox :value="tumorSpeciesContent[index * 4].name" v-if="tumorSpeciesContent[index * 4]">
                        <span class="total-count__inner" @click.stop="navToSingle(tumorSpeciesContent[index * 4].name, 'tumor_type')">{{tumorSpeciesContent[index * 4].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                      <a-checkbox :value="tumorSpeciesContent[index * 4 + 1].name" v-if="tumorSpeciesContent[index * 4 + 1]">
                        <span class="total-count__inner" @click.stop="navToSingle(tumorSpeciesContent[index * 4 + 1].name, 'tumor_type')">{{tumorSpeciesContent[index * 4 + 1].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                      <a-checkbox :value="tumorSpeciesContent[index * 4 + 2].name" v-if="tumorSpeciesContent[index * 4 + 2]">
                        <span class="total-count__inner" @click.stop="navToSingle(tumorSpeciesContent[index * 4 + 2].name, 'tumor_type')">{{tumorSpeciesContent[index * 4 + 2].name}}</span>
                      </a-checkbox>
                    </a-col>
                    <a-col :span="6">
                      <a-checkbox :value="tumorSpeciesContent[index * 4 + 3].name" v-if="tumorSpeciesContent[index * 4 + 3]">
                        <span class="total-count__inner" @click.stop="navToSingle(tumorSpeciesContent[index * 4 + 3].name, 'tumor_type')">{{tumorSpeciesContent[index * 4 + 3].name}}</span>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="main-content">
      <p class="font-pattern-1 center-layout" style="cursor: pointer;" @click.stop="toAbout">关于安柯瑞</p>
      <p class="font-pattern-2 center-layout">About Oncorine</p>
      <div class="liner-pattern"></div>
      <div class="main-content__profile">
        <div class="main-content__profile-left">
          <img :src="require('@/assets/image/pic_main_1.png')" alt="" style="width: 100%; height: 210px;">
        </div>
        <div class="main-content__profile-right">
          <div class="main-content__profile-title">安柯瑞®（重组人5型腺病毒注射液）</div>
          <div class="main-content__profile-subtitle">Oncorine（Recombinant Human Adenovirus 5 Injection）</div>
          <div class="font-pattern-3" style="margin-top: 19px;">•安柯瑞®（重组人5型腺病毒注射液）全球第一款获批上市的溶瘤病毒，同时也是中国医疗市场 唯一的溶瘤病毒产品。</div>
          <div class="font-pattern-3">•利用基因工程技术删除人5型腺病毒E1B-55kD基因片段和E3-19KD基因片段后重新获得的一种溶瘤腺病毒，是新一代抗肿瘤生物制剂。</div>
          <div class="main-content__profile-tip" @click.stop="goToInfo">◆处方资料◆</div>
        </div>
      </div>
      <div class="font-pattern-1 center-layout" style="margin-top: 56px; width: 100%">新闻与更新</div>
      <div class="font-pattern-2 center-layout" style="width: 100%;">News and Updates</div>
      <ul class="main-content__update">
        <li class="main-content__update-item" v-for="item in newAndUpdate" :key="item.id">
          <div class="main-content__update-item__left">
            <span>{{new Date(item.update_time).getFullYear() + '.' + formatMonth(parseInt(new Date(item.update_time).getMonth()) + 1) + '.' + new Date(item.update_time).getDate()}}</span>
          </div>
          <ul class="main-content__update-item__right">
            <li>{{item.title}}</li>
            <li>{{item.describe}}</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import customSelect from '@/components/CustomSelect/index.vue'
import customInput from '@/components/CustomInput/index.vue'
import { SYSTEM_MODULE, LOGIN_TIME_OUT } from '@/utils/dict'
import { mapGetters } from 'vuex'
import { arrayToSplitStr } from '@/utils/index'
export default {
  name: 'mainPage',
  components: { customSelect, customInput },
  data () {
    return {
      tabList: [],
      tabName: '全部',
      ruleForm: {
        keywords: '',
        tumor_type: '', // 瘤种类型
        virus_type: '', // 溶瘤病毒类型
      },
      oncolyticVirusContent: [],
      tumorSpeciesContent: [],
      newAndUpdate: [],
      about: '',
      tOut: LOGIN_TIME_OUT,
      timer: null
    }
  },
  methods: {
    formatMonth (val) {
      return val < 10 ? '0' + val : val
    },
    toAbout () {
      this.$router.push('/about/index')
    },
    navToSingle (selection, type) {
      this.ruleForm[type] = selection
      this.searchFun()
    },
    handleMenuClick (e) {
      console.log('handleMenuClick', e)
      this.tabName = e.key
    },
    onColyticChange (checkedValues) {
      this.ruleForm.virus_type = arrayToSplitStr(checkedValues)
      console.log('this.ruleForm.virus_type', this.ruleForm.virus_type)
    },
    onTumorChange (checkedValues) {
      this.ruleForm.tumor_type = arrayToSplitStr(checkedValues)
      console.log('this.ruleForm.tumor_type', this.ruleForm.tumor_type)
    },
    searchFun () {
      switch (this.tabName) {
        case '全部':
          this.$router.push('/simple/search/document')
        break;
        case '文献集锦':
          this.$router.push('/complex/document')
        break;
        case '临床试验':
          this.$router.push('/clinical/index')
        break;
        case '会议进展':
          this.$router.push('/meeting/index')
        break;
        case '药企资讯':
          this.$router.push('/realinfo/index')
        break;
        case '材料总结':
          this.$router.push('/summary/index')
        break;
        case 'Q&A':
          this.$router.push('/qanda/index')
        break;
        default:
          this.$router.push('/simple/search/document')
        break;
      }
      this.$action('setFilter', JSON.parse(JSON.stringify(this.ruleForm)))
      this.$action('setSearchValue', this.ruleForm.keywords)
    },
    initDict () {
      this.oncolyticVirusContent = this.dicts && this.dicts.oncolyticVirusType ? this.dicts.oncolyticVirusType.subs : [] // 溶瘤病毒
      this.tumorSpeciesContent = this.dicts && this.dicts.tumorType ? this.dicts.tumorType.subs : [] // 瘤种类型
      this.tabList = []
      for (const item in SYSTEM_MODULE) {
        this.tabList.push({
          id: item,
          name: SYSTEM_MODULE[item]
        })
      }
    },
    async initUpdateData () {
      this.newAndUpdate = await this.$action('getUpdateData')
      console.log('this.newAndUpdate', this.newAndUpdate)
    },
    async initAbout () {
      const res = await this.$action('getSinglePageData', { id: 1 })
      console.log('res', res)
      if (res && Object.keys(res).length > 0) {
        this.about = res.content
      }
    },
    goToInfo () {
      this.$router.push('/about/index')
    },
    async loginSign () {
      const sign = this.$route.query.sign
      console.log('loginSign', sign)
      if (sign) {
        const res = await this.$action('getLoginSign', { sign })
        if (res && res.code === 200) {
          // this.msgSuccess(res.msg)
          this.setCookie('uid', res.data.user_id)
          this.setCookie('token', res.data.token)
          this.setCookie('name', res.data.name)
          this.setLocalStorage('tOut', this.tOut)
          this.$action('refreshTopTab', res.data.name)
          if (this.timer) {
            window.clearInterval(this.timer)
          }
          this.timer = window.setInterval(() => {
            let tOut = 0
            if (window.localStorage.getItem('tOut') || window.localStorage.getItem('tOut') == 0) {
              tOut = window.localStorage.getItem('tOut')
            }
            tOut--
            window.localStorage.setItem('tOut', tOut)
            if (window.localStorage.getItem('tOut') <= 0) {
              removeCookie('uid')
              removeCookie('token')
              next({ path: '/login' })
              // this.msgInfo('登入已超时， 请重新登录。')
            }
          }, 1000)
        } else {
          if (this.timer) {
            window.clearInterval(this.timer)
          }
          this.removeCookie('uid')
          this.removeCookie('token')
          this.removeCookie('name')
          this.setLocalStorage('tOut', 900)
          this.$action('refreshTopTab', '')
        }
      }
    }
  },
  mounted () {
    this.initDict()
    this.initUpdateData()
    this.initAbout()
    // this.setCookie('uid', 1)
    this.loginSign() // sign登录
  },
  computed: {
    ...mapGetters({
      dicts: 'dicts'
    })
  },
  watch: {
    dicts (val, old) {
      this.initDict()
    }
  },
  beforeDestroy() {
    if (this.timer) {
      window.clearInterval(this.timer)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.main-page-container {
  width: 100%;
  .main-banner {
    width: 100%;
    height: 600px;
    background-image: url('./../../assets/image/banner.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .main-banner-search {
      position: absolute;
      top: 319px;
      width: 1086px;
      left: calc(50% - 543px);
      height: 281px;
      .banner-search {
        width: 100%;
        height: 57px;
        background-color: #fff;
        border-radius: 5px;
        padding: 0px 13px;
        .banner-search-input {
          border: none;
          font-size: 16px;
          /deep/ .input-pattern {
            width: 95%;
          }
          .icon-search {
            width: 28px;
            height: 33px;
            cursor: pointer;
          }
        }
      }
      .total-count-container {
        padding-top: 36px;
        .total-count__title {
          font-weight: bold;
          color: #fdfdfd;
        }
        .total-count__inner {
          font-weight: 400;
          color: #fdfdfd;
          font-size: 1em;
        }
      }
    }
  }
  .main-content {
    // padding: 63px 0px 105px 0px;
    @include flex-def;
    @include flex-zTopBottom;
    @include flex-cCenter;
    width: 1086px;
    margin: 62px auto;
    .center-layout {
      margin-bottom: 6px;
    }
    .liner-pattern {
      margin-top: 4px;
      width: 46px;
      height: 2px;
      background-color: #08adc1;
    }
    .main-content__profile {
      margin-top: 49px;
      width: 100%;
      @include flex-def;
      @include flex-zBetween;
      .main-content__profile-left {
        width: 52%;
      }
      .main-content__profile-right {
        width: 45%;
        p {
          margin-bottom: 0px !important;
        }
        .main-content__profile-title {
          font-size: 22px;
          color: #B0B0B0;
        }
        .main-content__profile-subtitle {
          font-size: 14px;
          color: #B0B0B0;
        }
        .main-content__profile-tip {
          font-size: 14px;
          margin-top: 24px;
          color: #0852C1;
          cursor: pointer;
        }
      }
    }
    .main-content__update {
      width: 100%;
      .main-content__update-item {
        margin-top: 24px;
        @include flex-def;
        @include flex-cCenter;
        .main-content__update-item__left {
          @include flex-def;
          @include flex-cCenter;
          @include flex-zCenter;
          padding: 14px 20px;
          background-image: linear-gradient(to right, #10F1B5, #04D2D5);
          background-image: -webkit-linear-gradient(to right, #10F1B5, #04D2D5);
          background-image: -moz-linear-gradient(to right, #10F1B5, #04D2D5);
          background-image: -o-linear-gradient(to right, #10F1B5, #04D2D5);
          background-image: -ms-linear-gradient(to right, #10F1B5, #04D2D5);
          border-radius: 3px;
          margin-right: 27px;
          width: 112px;
          max-width: 112px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            font-size: 14px;
            color: #fff;
          }
        }
        .main-content__update-item__right {
          color: #555;
          max-width: calc(100% - 148px);
          li:nth-child(1) {
            font-weight: bold;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          li:nth-child(2) {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>